<template>
    <div style="min-height: 1rem">
        <div class="loading-container" v-if="show">
            <a-spin/>
        </div>
    </div>

</template>

<script setup name="Loading">

    const show = ref(false);

    const showLoading = () => {
        show.value = true;
        document.body.style.overflow = "hidden";
        document.addEventListener("touchmove", () => {}, true);
    };
    const hideLoading = () => {
        show.value = false;
        var mo = function (e) {
            e.preventDefault();
        };
        document.body.style.overflow = "";
        document.removeEventListener("touchmove", mo, true);
    };

    onMounted(() => {});

    defineExpose({
        show,
        showLoading,
        hideLoading,
    });
</script>

<style scoped lang="less">
    .loading-container {
        position: absolute;
        min-height: 1rem;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, .5);

        ::v-deep{
            .arco-spin-icon{
                color: #fff;
                font-size: .3rem;
            }
        }

    }
</style>